<!DOCTYPE html>
<html>
<head>
    <title>房间浏览</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div data-role="page" id="orderBrowsePage">
    <script type="text/javascript">
        var loaded = false;//防止执行重复
        $(document).on("pageshow","#orderBrowsePage",function(){ // 当进入页面二时
            if (!loaded) {
                initData();
                loaded = true;
            }
        });

        /**
         * 初始化房间数据
         * */
        function initData(){
            Custom.request(this,"order/search",
                    function (data, textStatus) {
                        var tbody = "";
                        if (data != null && data.length != 0) {
                            $.each(data,function(n,value) {
                                var lis = "";
                                var orderStateSpan = value.state == "0" ? "<span class='ui-li-count' style='color:red;'>已退订</span>":"<span class='ui-li-count' style='color:green;'>预订成功</span>";
                                lis += "<li><a href='#'>"+

                                        "<h2>房间号"+ value.hno +"</h2>"+
                                        "<p>入住天数："+ value.days+"</p>"+
                                        "<p>"+ value.starttime+"</p>" +orderStateSpan;
                                tbody += lis;
                            });

                            $("#orderOl").append(tbody);
                            $("#orderOl").listview("refresh");
                            bindLiEvent(data);
                        }
                    });
        }

        /**
         * 给Li绑定事件
         */
        function bindLiEvent(obj){
            var parentTemp = this;
            $.each($("ol li"), function (i, val) {
                $(val).click(function () {
                    var order = obj[i];
                    $(val).simpledialog2({
                        mode: 'blank',
                        headerText: order.hno,
                        headerClose: true,
                        blankContent :
                                    "<p>是否取消此房间预订</p>"+
                                    "<a rel='close' onclick='cancelOrder("+order.id+","+order.hno+")' data-role='button' href='#'>退订</a>"+
                                    "<a rel='close' data-role='button' href='#'>关闭</a>"
                    });
                });
            });
        }

        function cancelOrder(id,hno){
            var tempParent = this;
            Custom.request(tempParent,"order/cancelOrder?id="+id+"&hno="+hno,
                    function (data, textStatus) {
                        if (data != null) {
                            $("#orderOl").empty();
                            Custom.alertMessage(tempParent,"退订成功");
                            initData();
                        }
                    });
        }

    </script>
    <div data-role="header">
        <h2>订单查看</h2>
    </div>
    <!-- /header -->

    <div data-role="content">
        <ol  id="orderOl" data-role="listview" data-inset="true"></ol>
    </div>
<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a onclick="changeHousePage()"  data-iconpos="top" data-icon="home">房间浏览</a></li>
            <li><a onclick="changeRoomOrderPage()" data-iconpos="top" data-multiview="true" data-icon="eye">预订房间</a></li>
            <li><a href="#" class="ui-btn-active ui-state-persist" data-iconpos="top" data-multiview="true" data-icon="search">浏览订单</a></li>
            <li><a onclick="changeMorePage()" data-iconpos="top" data-icon="tag">更多</a></li>
        </ul>
    </div>
</div>
</div>
</body>
</html>